<template>
  <div class="w-full h-full">
    <!-- 这里使用 Chart.js 或其他图表库来渲染分布图 -->
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js/auto'

export default {
  name: 'DistributionChart',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const ctx = this.$refs.chart.getContext('2d')
      this.chart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['乔木', '灌木', '草本', '藤本'],
          datasets: [{
            data: [35, 25, 30, 10],
            backgroundColor: [
              '#165DFF',
              '#0FC6C2',
              '#722ED1',
              '#FF7D00'
            ],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          },
          cutout: '70%'
        }
      })
    }
  },
  watch: {
    data: {
      handler() {
        if (this.chart) {
          // 更新图表数据
          this.chart.update()
        }
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.destroy()
    }
  }
}
</script> 